<template>
    <div class="mind-easy-map-widget">
        <div class="mind-map-gragh" id="container-wrapper">
            
        </div>
    </div>
</template>

<script setup>
import { onBeforeUnmount } from "vue";
import { BruceMap } from "./tools/bruce-map";

const brucemap = ref({})
// const nodeList = ref([
//     {id: 'kspacey', node: { label: "Graphlib",  width: 144, height: 60 } },
//     {id: 'swilliams', node: { label: "Raphael", width: 160, height: 60 } },
//     {id: 'bpitt', node: { label: "Dagrejs",     width: 108, height: 60 } },
//     {id: 'lwilson', node: { label: "SvgPanZoom",   width: 144, height: 60 }},
//     {id: 'kbacon', node: { label: "Bruce Map",   width: 121, height: 60 }}
// ])
// const edgeList = ref([
//     { sourceId: 'kspacey', targetId: 'kbacon' },
//     { sourceId: 'swilliams', targetId: 'kbacon' },
//     { sourceId: 'bpitt', targetId: 'kbacon' },
//     { sourceId: 'lwilson', targetId: 'kbacon' },
//     // { sourceId: 'lwilson', targetId: 'bpitt' },
// ])

const nodeList = ref([
    {id: 'kspacey', node: { label: "Vue3 JS",  width: 144, height: 60 } },
    {id: 'swilliams', node: { label: "Raphael", width: 160, height: 60 } },
    {id: 'bpitt', node: { label: "SvgPanZoom",     width: 120, height: 60 } },
    {id: 'hford', node: { label: "Dagrejs", width: 168, height: 60 } },
    {id: 'lwilson', node: { label: "Graphlib",   width: 144, height: 60 } },
    {id: 'vitejs', node: { label: "Vite 5.0",   width: 144, height: 60 } },
    {id: 'router', node: { label: "Router 4.0",   width: 144, height: 60 } },
    {id: 'navie', node: { label: "Navie UI",   width: 144, height: 60 } },
    {id: 'javascript', node: { label: "JavaScript",   width: 144, height: 60 } },
    {id: 'kbacon', node: { label: "Bruce Map",   width: 121, height: 60 }}
])
const edgeList = ref([
    { sourceId: 'vitejs', targetId: 'kbacon' },
    { sourceId: 'kspacey', targetId: 'kbacon' },
    { sourceId: 'swilliams', targetId: 'kbacon' },
    { sourceId: 'bpitt', targetId: 'kbacon' },
    { sourceId: 'hford', targetId: 'kbacon' },
    { sourceId: 'lwilson', targetId: 'kbacon' },
    { sourceId: 'router', targetId: 'kbacon' },
    { sourceId: 'javascript', targetId: 'kbacon' },
    { sourceId: 'navie', targetId: 'kbacon' },
])

nextTick(() => {
    brucemap.value = new BruceMap(
        "#container-wrapper",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: '', // 无向图不需要传递布局属性
            directed: false, // 有向图true，无向图false 
            align: undefined
        }
    )
})

onBeforeUnmount(() => {
    brucemap.value.destroy()
})
</script>

<style lang="scss" src="./style.scss"></style>